<template>
	<view>
		<view class="uni-padding-wrap">
		      <view class="page-section swiper">
				    <swiper class="swiper" 
							:indicator-dots="swiperImg.effect.indicatorDots"
							:interval="swiperImg.effect.interval" 
							:duration="swiperImg.effect.duration"
							:autoplay="swiperImg.effect.autoplay"
							:circular="swiperImg.effect.circular">
		                <view class="page-section-spacing">
		                   <swiper-item v-for="ban of swiperImg.bans" :key="ban.id">
		                      <navigator  class="swiper-item" :url="ban.href"><img :src="ban.src" :alt="ban.alt"></navigator>
		                    </swiper-item>
		                </view>
						</swiper>
		            </view>
			</view>
	</view>
</template>

<script>
	export default {
		name: 'swiperSlide',
		props:{
			swiperImg: {
				type: Object
			}
		} 
	}
</script>
<style lang="less" scoped>
	.swiper-item {text-align: center;
	border-radius: 20px;
		img {
		 width:689rpx;
		 height:276rpx;
		 border-radius:21px;
		   margin:0 auto;
		}
	}
	.swiper-item.navigator-hover {
		  background-color: transparent; opacity: 1; 
	}
	.page-section {
		margin-left: -80%;
	}
</style>
